(function (window, undefined) {
    class Father {
        constructor(parent, option) {
            for (let k in option) {
                this[k] = option[k]
            }
            this.parent = parent
        }
        render (box) {
            const ele = document.createElement("div")
            ele.style.backgroundColor = this.color
            ele.style.width = this.width + "px"
            ele.style.height = this.height + "px"

            box.push(ele)
            this.parent.appendChild(ele)
        }
    }

    window.Father = Father
})(window, undefined);

(function (window, undefined) {
    class Brick extends Father {
        constructor(parent, option = { width: 900, height: 600, color: "" }) {
            super(parent, option)
        }
        renderBrickTage() {
            this.balls = []
            super.render(this.balls)
            this.balls[0].style.width = "1000px"
            this.balls[0].style.margin = "50px auto"
            this.renderBrick()
        }
        renderBrick() {
            this.eles = []
            this.x = this.balls[0].offsetLeft
            console.log();
            this.y = 40
            for (let i = 0; i < 5; i++) {
                for (let j = 0; j < 16; j++) {
                    const ele = document.createElement("div")
                    ele.style.position = "absolute"
                    ele.style.width = "45px"
                    ele.style.height = "20px"
                    ele.style.top = this.y + "px"
                    ele.style.left = this.x + 65 * j + "px"

                    ele.style.backgroundColor = "lightgreen"

                    this.balls[0].appendChild(ele)
                    this.eles.push(ele)
                }
                this.y = this.y + 40
            }
        }
        removeBrick(i) {
            this.balls[0].removeChild(this.eles[i])
            this.eles.splice(i, 1)
        }

    }
    window.Brick = Brick
})(window, undefined);

(function (window, undefined) {
    class Ball extends Father {
        constructor(parent, option = { width: 20, height: 20, color: "skyblue" }) {
            super(parent, option)
        }
        renderBall () {
            this.balls = []
            super.render(this.balls)
            this.balls[0].style.borderRadius = "50%"
            this.balls[0].style.position = "absolute"
            this.balls[0].style.zIndex = "888"
            
            this.balls[0].style.left = document.documentElement.offsetWidth / 2 + "px"
            this.balls[0].style.bottom = document.documentElement.offsetWidth / 2 - document.documentElement.offsetWidth * 0.45 + this.balls[0].offsetHeight + "px"
            // console.log(this.balls[0].style.bottom);

        }
    }
    window.Ball = Ball
})(window, undefined);

(function (window, undefined) {
    class Ward extends Father {
        constructor (parent, option = { width: 100, height: 20, color: "blue" }) {
            super(parent, option)
        }
        renderWard () {
            this.balls = []
            super.render(this.balls)
            this.balls[0].style.borderRadius = "10px"
            this.balls[0].style.position = "absolute"
            
            this.balls[0].style.zIndex = "999"
            
            this.balls[0].style.left = document.documentElement.offsetWidth / 2 + "px"
            this.balls[0].style.bottom = document.documentElement.offsetWidth / 2 - document.documentElement.offsetWidth * 0.45 + "px"
        }
    }

    window.Ward = Ward
})(window, undefined);

(function (window, undefined) {
    class Game {
        constructor(tage, score) {
            this.ball = new Ball(tage)
            this.ward = new Ward(tage)
            this.brick = new Brick(tage)
            this.tage = tage
            this.stepX = 6
            this.stepY = 6
            this.score = score
        }
        start() {
            this.ball.renderBall()
            this.ward.renderWard()
            this.brick.renderBrickTage()
            this.moveWard()
            let timer = null
            document.onclick = function () {

                clearInterval(timer)

                timer = setInterval(function () {
                    this.isLaunch(timer)
                    this.moveball()
                    // clearInterval(timer)
                }.bind(this), 50)
            }.bind(this)
        }
        moveball() {
            this.ball.balls[0].style.bottom = (parseInt(this.ball.balls[0].style.bottom) + this.stepY) + "px"
            this.ball.balls[0].style.left = (parseInt(this.ball.balls[0].style.left) + this.stepX) + "px"

        }
        isLaunch(timer) {
            if (this.ball.balls[0].offsetLeft + this.ball.width > window.innerWidth) {
                this.stepX = -6
            } else if (this.ball.balls[0].offsetTop <= 0) {
                this.stepY = -6
            } else if (this.ball.balls[0].offsetTop >= this.tage.offsetHeight) {
                clearInterval(timer)
                this.ball.parent.children[0].style.display = "block"
            } else if (this.ball.balls[0].offsetLeft <= 0) {
                this.stepX = 6
            } else if (this.ball.balls[0].offsetTop + this.ball.height <= this.ward.balls[0].offsetTop + this.ward.balls[0].offsetHeight && this.ball.balls[0].offsetTop + this.ball.height >= this.ward.balls[0].offsetTop && this.ball.balls[0].offsetLeft + this.ball.balls[0].offsetWidth >= this.ward.balls[0].offsetLeft && this.ball.balls[0].offsetLeft <= this.ward.balls[0].offsetLeft + this.ward.balls[0].offsetWidth) {
                this.stepY = 6
            }

            for (let i = 0; i < this.brick.eles.length; i++) {

                if (this.ball.balls[0].offsetTop + this.ball.balls[0].offsetHeight >= this.brick.eles[i].offsetTop && this.ball.balls[0].offsetLeft + this.ball.balls[0].offsetWidth >= this.brick.eles[i].offsetLeft && this.ball.balls[0].offsetLeft <= this.brick.eles[i].offsetLeft + this.brick.eles[i].offsetWidth && this.ball.balls[0].offsetTop <= this.brick.eles[i].offsetTop + this.brick.eles[i].offsetHeight) {


                    if (this.ball.balls[0].offsetTop <= this.brick.eles[i].offsetTop + this.brick.eles[i].offsetHeight && this.ball.balls[0].offsetTop > this.brick.eles[i].offsetTop && this.stepY > 0 && this.ball.balls[0].offsetTop > this.brick.eles[i].offsetTop) {
                        this.stepY = -6
                    }

                    else if (this.ball.balls[0].offsetTop + this.ball.balls[0].offsetHeight >= this.brick.eles[i].offsetTop && this.stepY < 0 && this.ball.balls[0].offsetTop <= this.brick.eles[i].offsetTop) {
                        this.stepY = 6
                    }


                    this.brick.removeBrick(i)
                    this.addScore()
                }


            }
        }
        moveWard() {
            document.onmousemove = function (e) {
                this.ward.balls[0].style.left = e.clientX - parseInt(this.ward.balls[0].style.width) / 2 + "px"
            }.bind(this)
        }
        addScore() {
            let num = parseInt(this.score.innerText) + 1
            this.score.innerText = num
        }

    }

    window.Game = Game
})(window, undefined);

(function (window, undefined) {
    const tage = document.getElementById("tage")
    const score = document.getElementById("score")
    const resize = document.getElementById("resize")
    const game = new Game(tage, score)
    game.start()
    resize.onclick = function () {
        location.reload()
    }
})(window, undefined);